<template>
    <div class="box-body">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">参加活动（竞赛）情况</h3>
            </div>
            <div class="box-body">
                <el-form :model="editrace" status-icon ref="editrace" label-width="160px">
                    <div class="col-sm-6">
                        <el-form-item label="活动名称">
                            <el-input :disabled="!isEditable" v-model="editrace.name" placeholder="请输入活动名称" auto-complete="off"></el-input>
                        </el-form-item>
                    </div>
                    <div class="col-sm-6">
                        <el-form-item label="活动级别">
                            <el-select :disabled="!isEditable" v-model="editrace.level" @change="value=>editrace.level = value">
                                <el-option v-for="item in this.racelevels" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="col-sm-6">
                        <el-form-item label="时间">
                            <MyDatePicker :editable="isEditable" v-bind:date="editrace.playtime" @timeChanged="time=>editrace.playtime = time"></MyDatePicker>
                        </el-form-item>
                    </div>
                    <div class="col-sm-6">
                        <el-form-item label="地点">
                            <el-input :disabled="!isEditable" v-model="editrace.location" placeholder="请输入地点" auto-complete="off"></el-input>
                        </el-form-item>
                    </div>
                    <div class="col-sm-6">
                        <el-form-item label="参与形式">
                            <el-select :disabled="!isEditable" v-model="editrace.racetype" @change="value=>editrace.racetype = value">
                                <el-option v-for="item in this.racetypes" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="col-sm-6">
                        <el-form-item label="参与项目（科目）">
                            <el-input :disabled="!isEditable" v-model="editrace.subject" placeholder="请输入参与项目（科目）" auto-complete="off"></el-input>
                        </el-form-item>
                    </div>
                    <div class="col-sm-6">
                        <el-form-item label="取得成绩">
                            <el-input :disabled="!isEditable" v-model="editrace.reward" placeholder="请输入取得成绩" auto-complete="off"></el-input>
                        </el-form-item>
                    </div>
                    <div class="col-sm-12">
                        <el-form-item label="备注">
                            <el-input :disabled="!isEditable" type="textarea" :rows="2" v-model="editrace.comment" placeholder="请输入备注信息"></el-input>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import MyDatePicker from '../../mycomponents/common/MyDatePicker'
    export default {
        name: "RaceForm",
        props: ["race", "editable"],
        data(router) {
            return {
                isEditable: false,
                editrace: {
                    level: 1,
                    name: "",
                    playtime: "",
                    location: "",
                    racetype: 1,
                    subject: "",
                    reward: "",
                    comment: ""
                },
                racelevels: [],
                racetypes: []
            }
        },
        components: {
            MyDatePicker
        },
        created: function() {
            if (this.race) {
                this.editrace = this.race;
            }
            if (this.editable != null && this.editable != undefined) {
                this.isEditable = this.editable;
            }
            this.racelevels = this.$store.state.sysconfigs.racelevels;
            this.racetypes = this.$store.state.sysconfigs.racetypes;
        },
        methods: {
            getData: function() {
                var validRes = true;
                this.$refs.editrace.validate(valid => {
                    if (valid) {
                        validRes = true;
                    } else {
                        console.log("error submit!!");
                        validRes = false;
                        return false;
                    }
                });
                console.log(" editrace:", JSON.stringify(this.editrace));
                if (!validRes) {
                    return null;
                }
                return this.editrace;
            }
        }
    };
</script>

